import React from "react";
import { Checkbox, Icon, Popover, Tooltip } from "antd";
import { messages } from "share/common";
import Condition from "components/condition";
import ExportModal from "components/template/export-modal/export-modal";

const { PropTypes, Component } = React;
const { If } = Condition;

class ReportCommonUtils extends Component {

  state = {
    settingVisible: false,
    settingChildren: []
  };

  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.settingChildren !== nextProps.settingChildren) {
      this.setState({
        settingChildren: nextProps.settingChildren
      })
    }
  }

  handleSettingVisibleChange = (settingVisible) => {
    this.setState({
      settingVisible
    })
  }

  renderSetting = () => {
    const { settingVisible } = this.state;
    return (
      <Tooltip title={<span>{messages('common-1.key350')/*设置*/}</span>} placement='top'>
        <div className='util-icon-wrapper'>
          <Popover
            title={messages('common-1.key350')/*设置*/}
            content={this.renderSettingChildren()}
            placement='bottomRight'
            autoAdjustOverflow={false}
            trigger='click'
            visible={settingVisible}
            onVisibleChange={this.handleSettingVisibleChange}
          >
            <span onClick={this.toState(
              { settingVisible: !settingVisible }
            )}>
              <Icon type="setting" className='util-icon'/>
            </span>
          </Popover>
        </div>
      </Tooltip>
    )
  };

  renderExport = () => {
    const { exportDisable, reportCode, exportParams, exportType, exportUrl } = this.props;
    return (
      <ExportModal
        methodCheck
        codeCheck
        disabled={exportDisable}
        type={"icon"}
        btnType={"primary"}
        exportTitle={messages('common-1.key315')/*导出数据*/}
        exportType={exportType}
        iconClassName='util-icon-wrapper'
        exportUrl={exportUrl}
        exportCondition={{
          exportType,
          "command": reportCode,
          ...exportParams
        }}
      />
    )
  };

  onSettingChange = (id, e) => {
    this.props.onSettingChange(id, e.target.checked)
  };

  renderSettingChildren = () => {
    const { settingChildren } = this.state;

    return (
      <div className=''>
        {settingChildren.map(item => {
          return (
            <Checkbox
              checked={item.value}
              onChange={(e) => this.onSettingChange(item.id, e)}>
              {item.label}
            </Checkbox>
          )
        })}
      </div>
    )
  };

  render() {
    const { allowExport, allowSetting } = this.props;
    return (
      <div className="report-common-utils-wrapper">
        <If value={allowExport}>
          {this.renderExport()}
        </If>
        <If value={allowSetting}>
          {this.renderSetting()}
        </If>
      </div>
    )
  }

  static propTypes = {
    allowExport: PropTypes.bool,
    allowSetting: PropTypes.bool,
    settingChildren: PropTypes.array,
    onSettingChange: PropTypes.func,
    reportCode: PropTypes.string,
    exportDisable: PropTypes.bool,
    exportParams: PropTypes.object,
    exportType: PropTypes.string,
    exportUrl: PropTypes.string,
  };

  static defaultProps = {
    allowSetting: true,
    onSettingChange: () => {
    },
    settingChildren: []
  };

}

export default ReportCommonUtils
